<%--
  @desc: 自助移车
--%>
<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" type="text/css" href="<c:url value='/resource/wechat/css/global.css'/>">
	<script src="<c:url value='/resource/js/jquery-2.0.min.js'/>"></script>
	<script type="text/javascript" src="<c:url value='/resource/wx/newjs/common.js'/>"></script>
	<script src="<c:url value='/resource/js/jquery-1.8.3.min.js'/>"></script>
	<script src="<c:url value='/resource/wechat/js/FormValid.js'/>"></script>
	<script src="<c:url value='/resource/wechat/js/main.js'/>"></script>
	<script src="<c:url value='/resource/js/jquery.form.min.js'/>"></script>
	<script src="<c:url value='/resource/js/lrz/mobileFix.mini.js'/>"></script>
	<script src="<c:url value='/resource/js/lrz/exif.js'/>"></script>
	<script src="<c:url value='/resource/js/lrz/lrz.js'/>"></script>
	<%--	<script type="text/javascript" src="<c:url value='/resource/wx/js/jquery-2.1.1.min.js'/>"></script>--%>
	<script type="text/javascript" src="<c:url value='/resource/wx/newjs/common.js'/>"></script>

	<%--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=BoDHWfB34TUhSDodZSudcbo0"></script>--%>
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=qBholiSEA43Kk3sBiXAeQql9ReLMZGqW&s=1"></script>

	<style type="text/css">
		.toast {
			display: none;
			position: absolute;
			bottom: 100px;
			text-align: center;
			width: 170px;
			white-space: nowrap;
			font-size: 15px;
			line-height: 15px;
			padding: 0.7em 1em 0.9em 1em;
			color: #fff;
			border-radius: 4px;
			background-color: rgba(0, 0, 0, 0.67);
			border: none;
			width: -moz-fit-content;
			width: -webkit-fit-content;
			height: -webkit-fit-content;
			width: fit-content;
			margin-left: auto;
			margin-right: auto;
			border: 0;
			left: 0;
			right: 0;
		}
		.show {
			display: block;
			animation: toast-alert 0.2s;
			-webkit-animation: toast-alert 0.2s;
			-webkit-animation-timing-function: ease;
		}
	</style>

	<title>自助移车</title>
	<script type="text/javascript">
        $(function() {
            //车型类型
            var opHtml="";
			/*          opHtml+='<option >请选择</option>'*/
            opHtml+='<c:forEach items="${listVehicleType}" var="list"><option value="${list.val}">${list.title}</option></c:forEach>'
            $("#carTypeId").html(opHtml);

            $("#saveForm").click(function () {

                if($("#carNo").val()=='undefined'|| $("#carNo").val()==null|| $("#carNo").val()=='' ){
                    toast("请输入车牌号码");
                    return false;
                }
//                if($("#picid").val()=='undefined'|| $("#picid").val()==null|| $("#picid").val()=='' ){
//                    toast("请上传图片");
//                    return false;
//                }
                $.ajax({
                    url:"<c:url value='/api/movecar/savedlyc'/>",
                    dataType: "json",
                    data: {"carTypeId": $("#carTypeId").val(),"carNo": $("#carNo").val(),"address": $("#address").val(),"picid": $("#picid").val(),"pt": $("#pt").val(),"aUserGuid": $("#aUserGuid").val(),"aUserName": $("#aUserName").val()},
                    type: "post",
                    beforeSend: function () {
                        lockBtn();
                        lockBg();
                    },
                    success: function (data) {
                        if (data.succ) {
                            unlockBg();
                            unlockBtn();
                            alert(data.msg);
                            window.location.href = "http://ynwx.yungov.cn/econsole/weixin/wx_member/baseOauth?url=http://ynwx.yungov.cn/econsole/weixin/wx_member/index";
                        } else {
                            unlockBg();
                            unlockBtn();
                            alert(data.msg);
                            return false;
                        }
                    },
                    error: function () {
                        alert("自助移车信息上传失败");
                    }
                });
            })
        });
        function readFile(obj){
            var file = obj.files[0];
            //判断类型是不是图片
            if(!/image\/\w+/.test(file.type)){
                obj.outerHTML = obj.outerHTML.replace(/(value=\").+\"/i, "$1\"");

                toast("请确保文件为图像类型");
                return false;
            }

            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(e){
                $("#preview").attr("src",this.result);
                $("#Base64").val(this.result);
            };
            var formData = new FormData();
            formData.append("file",obj.files[0]);

            $.ajax({
                url: '${uplodaUrl}',
                type : "POST",
                data: formData,//参数
                dataType: 'json' ,//返回值类型 一般设置为json
                contentType: false,
                processData: false,
                success: function (data) {
                    $("#picid").val(data.data.guid);
                    toast("提交照片成功");
                },
                error: function () {
                    toast("上传图片失败");
                }
            });

        }

        function uploadImage(){
            $("#carfile").click();
        }

	</script>
</head>

<body>
<!--wrap-page-->
<div class="wrap-page">
	<div class="row">
		<div class="input_div">
			<span class="input_span" style="width: 40%">堵路车牌：云</span>
			<input maxlength="6" id="carNo" name="carNo" type="text" placeholder="请输入堵路车牌" class="right_text" valid="required" errmsg="请输入堵路车牌" style=" text-transform: uppercase;width:60%"/>
		</div>
		<div class="input_div clearfix">
			<span class="input_span" style="width: 40%">堵路车型：</span>
			<select id="carTypeId" name="carTypeId" class="select" valid="required" errmsg="请选择车辆类型" style="width:60%">


			</select>
		</div>

		<div class="input_div">
			<input id="address" name="address" maxlength="30" type="text" placeholder="请输入你的当前位置" class="full_text" value="" valid="required" errmsg="请输入你的当前位置"/>
		</div>
		<div class="input_div" style="display:none;">
			<input id="carfile" onchange="readFile(this)" type="file" accept="image/*"  capture="camera"
				   multiple="multiple"  name="carfile" valid="required" errmsg="请上传堵路车辆照片"/>
			<input name="Base64" id="Base64" type="hidden">
			<input name="picid" id="picid" type="hidden">
			<input name="aUserGuid" id="aUserGuid" type="hidden" value="${aUserGuid}">
			<input name="aUserName" id="aUserName" type="hidden" value="${aUserName}">
			<input name="pt" id="pt"  type="hidden" value="${pt}">
		</div>
		<div class="upload clearfix" id="uploadimage" onclick="uploadImage()">
			<div class="up_load_l">
				<img id="preview" src="<c:url value='/resource/wechat/images/car.png'/>">
			</div>
			<div class="up_load_r">
				<p id="formt7" style="font-weight: 600;">上传堵车车辆现场场景照</p>
				<p style="font-size: 12px; color: #999;">要求：照片要体现周围环境，过错（如占道停车等），车牌号清晰可见</p>
			</div>
		</div>
		<div class="input_div" style="margin-bottom: 30px;">
			<input type="hidden" name="pushId" id="pushId" value="${pushId}" />
			<input type="hidden" name="pushType" id="pushType" value="${pushType}" />
			<input type="hidden" name="reportMobile" value="${member.mobile}">
			<input name="reportIdCard" type="hidden" value="${member.userCode}"/>
			<input type="button" value="提 交"  id="saveForm" name="saveForm" class="submit_input"/>
		</div>

	</div>
</div>
</body>
<script type="text/javascript">


    $(document).ready(function () {
        //自动定位
        initLocation();
    })

    function initLocation() {
        var gc = new BMap.Geocoder();
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
//                $("#longitude").val(r.point.lng);
//                $("#latitude").val(r.point.lat);
                gc.getLocation(r.point, function (rs) {
                    var addComp = rs.addressComponents;
                    $("#address").val(
                        addComp.province + addComp.city
                        + addComp.district + addComp.street
                        + addComp.streetNumber);
                });
            } else {
            }
        }, {
            enableHighAccuracy: true
        });
    }
</script>
</html>